<template>
	<view>
		<view class="contents">
			<template v-if="info.state==1">
				<view class="image">
					<image
						src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/14/55168fd3ddb94f59946049e3cf48d5d2.png"
						mode="widthFix"></image>
				</view>
				<view class="text font13 text-center color666 u-font-26">
					<view style="width: 600rpx;">
						已经生成个性化的报告，可下载查看啦，下载需要几秒钟。文件保存在Download/WeiXin
						</text>
					</view>
				</view>
			</template>
			<template v-if="info.state === 0">
				<view class="image">
					<image
						src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/14/e4bb75e5b48544a18b27102b37d80eb2.png"
						mode="widthFix"></image>
				</view>
				<view class="text font13 text-center color666 u-font-26">
					<view style="width: 600rpx;">
						正在生成报告，数据很多，请耐心等待......</text>
					</view>
				</view>
			</template>
			<template v-if="info.state === 2">
				<view class="image">
					<image show-menu-by-longpress style="height: 200rpx;" :src="src1" mode="widthFix"></image>
				</view>
				<view class="text font13 text-center color666 u-font-26">
					<view style="width: 600rpx;">
						报告生成失败，请联系客服进行处理</text>
					</view>
				</view>
			</template>
			<view>
				<view class="box">
					<view class="font12 u-m-l-30 u-m-r-20">
						{{info.majorName || ''}}
					</view>
					<view class="font12 u-m-r-30 shrink-0" style="color: #F7DD5E;" v-if="info.state==0">
						生成中...
					</view>
					<view class="font12 btn shrink-0" v-if="info.state==1" @click="download(info)">
						可下载
					</view>
					<view class="font12 btn shrink-0" v-if="info.state == 2">
						生成失败
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		tiaojiliebiao,
		serveUser
	} from "@/api/toolbox.js"
	export default {
		data() {
			return {
				page: {
					"pageNum": 1,
					"pageSize": 10
				},
				id: null,
				type: 'test',
				pdfList: [],
				zhuangtai: "",
				isError: false, //是否出错
				info: {},
				src1: "",
				timer: null
			};
		},
		onLoad(e) {
			if (e.type) {
				this.type = e.type;
			}
			if (e.id) {
				this.id = e.id;
				this.getData();
			}
			let str = '调剂报告下载';
			uni.setNavigationBarTitle({
				title: (this.type === 'test' ? '预估' : '正式') + str
			})
			serveUser().then((res) => {
				this.src1 = res.data
			})
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
		methods: {
			getData() {
				tiaojiliebiao({
					adjustId: this.id,
					pageNum: 1,
					pageSize: 1,
				}).then((res) => {
					this.info = res.data.rows[0];
					if (this.info?.state === 0) {
						this.timer = setTimeout(() => {
							this.getData();
						}, 10000)
					}
				})
			},
			xiazai(value) {
				let url1 = this.list[0][value].url
				uni.downloadFile({
					url: url1,
					success(res) {
						uni.openDocument({
							filePath: res.tempFilePath
						})
					}
				})

			},
			download(item) {
				let that = this
				uni.showLoading({
					title: '下载中...',
					mask: true
				});
				uni.downloadFile({
					url: item.url, //下载地址，后端接口获取的链接
					success: (data) => {
						if (data.statusCode === 200) {
							let a = uni.getFileSystemManager()
							a.saveFile({ //文件保存到本地
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存!',
										duration: 3000,
									});
									uni.openDocument({
										showMenu: true, //关键点,可以转发到微信
										filePath: res.savedFilePath,
										success: function(res) {
											console.log('打开文档成功');
										}
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
					complete: (res) => {
						uni.hideLoading();
					}
				});

			}
		}
	}
</script>


<style>
	page {
		background-color: #F6F8F6;
	}
</style>

<style lang="scss">
	.contents {
		.image {
			display: flex;
			justify-content: center;
			width: 400rpx;
			align-items: center;
			margin: 60rpx auto 40rpx;

			image {
				width: 400rpx;
			}
		}

		.text {
			display: flex;
			justify-content: center;
		}

		.box {
			margin: 30rpx;
			width: 92vw;
			height: 100rpx;
			background: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				width: 128rpx;
				height: 54rpx;
				background-color: #F7DD5E;
				border-radius: 54rpx;
				text-align: center;
				line-height: 54rpx;
				margin-right: 30rpx;
			}

			.btn2 {
				width: 158rpx;
				height: 54rpx;
				background-color: #F7DD5E;
				border-radius: 54rpx;
				text-align: center;
				line-height: 54rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>